import React, { memo, useState } from 'react'
import { CapsuleTabs, Button, Popup } from 'antd-mobile'
import { useDispatch, useSelector } from 'react-redux'
import { changeBtn, removeRecycleBin, toTodoList } from '../features/todoList'
const Footer = memo(() => {
    const dispatch = useDispatch()
    let [visible, setVisible] = useState(false)
    let recycleBin = useSelector(state => state.todoList.recycleBin)
    return (
        <div>
            <CapsuleTabs onChange={(v) => dispatch(changeBtn(v))}>
                <CapsuleTabs.Tab title='全部' key='all' />
                <CapsuleTabs.Tab title='已完成' key='ok' />
                <CapsuleTabs.Tab title='未完成' key='no' />
            </CapsuleTabs>
            <Button onClick={() => { setVisible(true) }}>回收站</Button>
            <Popup
                visible={visible}
                onMaskClick={() => {
                    setVisible(false)
                }}
                bodyStyle={{ height: '40vh' }}
            >
                {
                    recycleBin.map(item => <div
                        key={item.id}
                        style={{
                            height: '50px',
                            backgroundColor: '#eee',
                            marginTop: '5px',
                            display: 'flex',
                            justifyContent: 'space-between',
                            alignItems: 'center'
                        }}>
                        <span> {item.value}</span>
                        <button onClick={() => {
                            dispatch(removeRecycleBin(item.id))
                            setVisible(false)
                        }
                        }>永久删除</button>
                        <button onClick={() => {
                            dispatch(toTodoList(item))
                            setVisible(false)
                        }
                        }>移出回收站</button>
                    </div>)
                }
            </Popup>
        </div >
    )
})

export default Footer